<template>
    <div>
        <div class="box">
            <div class="svg-box">
                    <svg class="sector1" width="50" height="82" viewBox="0 0 150 247" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M74.6916 246L2 45.7618C22.9633 10.9495 38.3426 -0.28942 74.6916 0.0227353C112.34 -0.549997 128.785 9.55656 150 45.7618L74.6916 246Z"
                            fill="url(#paint0_linear_39_62)" fill-opacity="0.7" />
                        <line y1="-0.5" x2="213.322" y2="-0.5"
                            transform="matrix(0.34785 0.93755 -0.930078 0.367362 0 45.9999)" stroke="#2F62F0" />
                        <line y1="-0.5" x2="213.322" y2="-0.5"
                            transform="matrix(-0.34785 0.93755 -0.930078 -0.367362 148.408 45.9999)" stroke="#2F62F0" />
                        <line x1="74.7041" y1="105.375" x2="74.7041" y2="246" stroke="#2F62F0" />
                        <line y1="-0.5" x2="180.064" y2="-0.5"
                            transform="matrix(-0.235485 0.971878 -0.968305 -0.24977 116.606 70.9999)"
                            stroke="#2F62F0" />
                        <line y1="-0.5" x2="188.222" y2="-0.5"
                            transform="matrix(0.201142 0.979562 -0.976931 0.213555 36.3449 61.6249)" stroke="#2F62F0" />
                        <defs>
                            <linearGradient id="paint0_linear_39_62" x1="76" y1="45.7618" x2="76" y2="246"
                                gradientUnits="userSpaceOnUse">
                                <stop offset="0.04" stop-color="#5AD9FD" stop-opacity="0" />
                                <stop offset="0.475" stop-color="#5AD9FD" stop-opacity="0.6" />
                                <stop offset="1" stop-color="#288EB4" stop-opacity="0.8" />
                            </linearGradient>
                        </defs>
                    </svg>
                    <svg class="sector2" width="50" height="82" viewBox="0 0 150 247" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M74.6916 246L2 45.7618C22.9633 10.9495 38.3426 -0.28942 74.6916 0.0227353C112.34 -0.549997 128.785 9.55656 150 45.7618L74.6916 246Z"
                            fill="url(#paint0_linear_39_62)" fill-opacity="0.7" />
                        <line y1="-0.5" x2="213.322" y2="-0.5"
                            transform="matrix(0.34785 0.93755 -0.930078 0.367362 0 45.9999)" stroke="#2F62F0" />
                        <line y1="-0.5" x2="213.322" y2="-0.5"
                            transform="matrix(-0.34785 0.93755 -0.930078 -0.367362 148.408 45.9999)" stroke="#2F62F0" />
                        <line x1="74.7041" y1="105.375" x2="74.7041" y2="246" stroke="#2F62F0" />
                        <line y1="-0.5" x2="180.064" y2="-0.5"
                            transform="matrix(-0.235485 0.971878 -0.968305 -0.24977 116.606 70.9999)"
                            stroke="#2F62F0" />
                        <line y1="-0.5" x2="188.222" y2="-0.5"
                            transform="matrix(0.201142 0.979562 -0.976931 0.213555 36.3449 61.6249)" stroke="#2F62F0" />
                        <defs>
                            <linearGradient id="paint0_linear_39_62" x1="76" y1="45.7618" x2="76" y2="246"
                                gradientUnits="userSpaceOnUse">
                                <stop offset="0.04" stop-color="#5AD9FD" stop-opacity="0" />
                                <stop offset="0.475" stop-color="#5AD9FD" stop-opacity="0.6" />
                                <stop offset="1" stop-color="#288EB4" stop-opacity="0.8" />
                            </linearGradient>
                        </defs>
                    </svg>
            </div>
        </div>
        <p class="text-box">{{porps.title}}</p>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const porps =  defineProps({
    title:{
        default:"",
        type:String
    }
})
</script>

<style scoped lang="scss">
.text-box{
    height: 20px;
    line-height: 20px; 
    letter-spacing: 5px;
    width: 45px;
    text-align: center;
    z-index: 0;
    padding: 5px 5px;
    background-color: #7AA7F9;
    opacity: .6;
    border-radius: 5px;
    border: 2px solid rgba(224, 24, 208, 0.644);
    box-shadow: 3px 3px 5px rgba(224, 24, 208, 0.644);
    position: relative;
    top: -100px;
    left: 2px;
    transform:rotate(0);
}

.svg-box{
    transform: rotateX(180deg);
}

.sector1 {
    position: relative;
    transform: rotateY(90deg);
    top:55px;
    left: 4px;
    animation: turn3 7s linear infinite;
}

.sector2 {
    position: relative;
    top: -30px;
    left: 4px;
    animation: turn4 5s linear infinite;
}

.box {
    border: 2px solid rgb(21, 181, 255);
    border-radius: 50%;
    z-index: 1;
}

.box:hover + .text-box{
    animation: turn4 .8s linear 1;
}

.box::after {
    border: 2px solid rgba(102, 163, 224, .2);
    border-left: 2px solid rgb(21, 181, 255);
    border-radius: 50%;
    z-index: 10;
}

.box::before {
    border: 2px solid rgba(102, 163, 224, .2);
    border-right: 2px solid rgb(21, 181, 255);
    border-radius: 50%;
    z-index: 10;
}

.box::after,
.box::before {
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
}

.box {
    width: 60px;
    height: 60px;
    position: relative;
    transform-origin: 50% 50%;
    transform: rotateX(120deg);
}

.box::before {
    width: 50px;
    height: 50px;
    margin-top: -22px;
    margin-left: -27px;
    animation: turn2 15s linear infinite;
}

.box::after {
    width: 40px;
    height: 40px;
    margin-left: -23px;
    margin-top: -10px;
    animation: turn 15s linear infinite;
}

@keyframes turn {
    100% {
        transform: rotateZ(-1turn);
    }
}

@keyframes turn2 {
    100% {
        transform: rotateZ(1turn);
    }
}

@keyframes turn3 {
    100% {
        transform: rotateY(1turn);
    }
}

@keyframes turn4 {
    100% {
        transform: rotateY(-1turn);
    }
}
</style>